<template>
	<view>
		<view class="detail-title2">
			{{detailInfo.applyUserName}}的维修备件申请
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请时间</view>
			<view class="right-title">{{detailInfo.createTime}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请类型</view>
			<view class="right-title">
				{{detailInfo.applyType==1?'维修申请':detailInfo.applyType==2?'维保申请':detailInfo.applyType==3?'点检申请':''}}
			</view>
		</view>
		<view class="gz-desc white-bg" style="border-bottom: 2rpx solid #f5f5f5;" v-if="!(detailInfo.applyType==2 || detailInfo.applyType==3)">
			<view class="title" style="color: #666666;">故障描述</view>
			<view class="desc-reason2" style="margin-top: 16rpx;color: #2b2b2b;">{{detailInfo.failurePhenomenon}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请备件数量</view>
			<view class="right-title">{{detailInfo.applyAmount}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请人</view>
			<view class="right-title">{{detailInfo.applyUserName}}</view>
		</view>

		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">审核时间</view>
			<view class="right-title">{{detailInfo.updateTime}}</view>
		</view>
		<view class="top-title defalut-bg">
			<view class="left-title">备件申请列表</view>
		</view>
		<view class="allData">
			<view class="all-chuku">出库数量：{{detailInfo.totalAmount}}</view>
			<view class="all-btg">总价值：{{detailInfo.applyFee}}元</view>
		</view>
		<view v-for="(item,s) in detailInfo.partDetailResponses" :key="s">
			<view class="list-wrapper">
				<view class="list-item">
					<view class="left-icon">
						<image :src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
						</image>
					</view>
					<view class="right-txt">
						<view class="txt1">
							<view class="txt1-left">{{item.partNum}}{{item.partName}}</view>
							<view class="txt1-right"
								:class="[item.approveStatus==3?'tag-success':item.approveStatus==2?'tag-error':item.approveStatus==1?'':'']">
								{{item.approveStatus==3?'已通过':item.approveStatus==2?'不通过':item.approveStatus==1?'待审核':''}}
							</view>
							<!-- class="txt1-right" txt1-right-notpass-->
						</view>
						<view class="txt3" style="margin-top: 20rpx;">
							<view>{{item.partTypeName}}</view>
							<view style="color: #2f2f2f;">申请数量：{{item.applyAmount}}</view>
						</view>
						<!-- <view v-if="item.approveStatus==2" class="txt4">
							<view class="iconfont icon-app-gantanhao" style="margin-right: 10rpx;"></view>
							原因：{{item.reason}}
						</view> -->
					</view>
				</view>
				<!-- 通过样式 -->
				<view v-if="item.approveStatus==3">
					<view class="ispass-title">出库批次信息</view>
					<view class="is-pass" v-for="(i,s) in item.detailResponses" :key="s">
						<view class="ispass-list">
							<view class="txt1">{{i.batchNum+'-'+i.expireDate}}</view>
							<view class="txt2">
								<view class="txt2-left">出库数量：<text style="color: #2f2f2f;">{{i.amount}}</text></view>
								<view class="txt2-left" style="margin-left: 200rpx;">单价：<text
										style="color: #2f2f2f;">{{i.price}}元</text></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.approveStatus==2">
					<view class="is-pass">
						<view class="ispass-title wwning"><image class="img" src="../../../static/images/index/warning.png" mode=""></image>不通过原因</view>
						<view class="reson">
							{{item.reason}}
						</view>
					</view>
				</view>
			</view>
			<view class="line8"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: '',
				detailInfo: {}
			}
		},
		onLoad(options) {
			if (options) {
				this.detailId = options.id;
			}
			this.getListInfo();
		},
		methods: {
			getListInfo() {
				uni.$u.http.get(`/device/mobile/devicePartApply/appGetInfo/${this.detailId}`).then(res => {
					console.log('res===>getList', res)
					if (res.code == 0) {
						this.detailInfo = res.data;
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.right-ritle2 {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 24rpx;
		color: #8c8c8c;

		.all-chuku {
			color: #8c8c8c;
		}

		.all-btg {
			color: #8c8c8c;
		}
	}

	.list-wrapper {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding: 20rpx;
			background: #fff;
			border-radius: 4px;
			margin: 10rpx 30rpx;
			border-bottom: 1px solid #F5F5F5;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-flow: column;

				.txt1 {
					font-size: 34rpx;
					color: #000000;
					width: 100%;
					display: flex;
					justify-content: space-between;

					// align-items: center;
					.txt1-left {
						width: 85%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break:break-all;
					}

					.txt1-right {
						width: 120rpx;
						height: 18px;
						text-align: right;
						margin-left: 30rpx;
					}

					.txt1-right-notpass {
						color: #fa4016;
					}

				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
				}

				.txt4 {
					color: #fa4016;
					font-size: 28rpx;
					display: flex;
					align-items: center;
				}
			}
		}

	}

	.list-item :last-child {
		border-bottom: none;
	}

	.bx-list {
		background: #f2f2f2;
		margin: 0 20rpx;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;

			.left {
				display: flex;
				font-size: 34rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(0, 0, 0, 1);

				.kucun-num {
					font-size: 28rpx;
					color: #8c8c8c;
					margin-left: 20rpx;
				}
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;

				.right-input {
					width: 100%;
					text-align: right;
					display: flex;
					align-items: center;
				}

				.txt-right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 10rpx;

					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
					}

					.addnum {
						.minus {
							color: #0F53AC;
							font-size: 34rpx;
						}

						.plus {
							color: #0F53AC;
							font-size: 34rpx;
						}

						.notselect-bg {
							color: #c4c4c4;
							font-size: 34rpx;
						}
					}
				}
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.delete-pc {
		color: #fa4016;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		background: #f2f2f2;
		margin: 2rpx 20rpx 0 20rpx;
		padding: 20rpx 0;
	}

	.addbtn-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;

		.add-btn {
			border-radius: 12rpx;
			border: 1px solid #0F53AC;
			margin-top: 30rpx;
			padding: 15rpx 0;
			width: 340rpx;
			text-align: center;
			color: #0F53AC;
		}
	}
	
	.ispass-title{
		font-size: 14px;
		font-weight: 400;
		color: #8c8c8c;
		padding: 24rpx 30rpx 16rpx 30rpx;
	}

	.is-pass {
		.ispass-title {
			font-size: 14px;
			font-weight: 400;
			color: #8c8c8c;
			padding: 24rpx 30rpx 16rpx 30rpx;
			
			.img{
				width: 16px;
				height: 16px;
				margin-right: 6rpx;
			}
		}

		.ispass-list {
			margin: 10rpx 30rpx;
			background: #f2f2f2;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			padding: 20rpx;

			.txt1 {
				font-size: 34rpx;
				color: #000000;
			}

			.txt2 {
				font-size: 24rpx;
				color: #8c8c8c;
				display: flex;
				margin-top: 20rpx;

				.txt2-left {}
			}
		}
		
		.reson{
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 23.17px;
			color: rgba(77, 77, 77, 1);
			padding: 0 32rpx;
			word-wrap: break-word;
			word-break: break-all;
		}
	}

	.allData {
		padding: 32rpx;
		display: flex;
		color: #8C8C8C;
		font-size: 16px;
		font-weight: 400;
		border-bottom: 1px solid #EDEDED;

		.all-chuku {
			margin-right: 96rpx;
		}
	}
	
	.wwning{
		display: flex;
		align-items: center;
	}
</style>